<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			/* 偶数：红色 */
			.section1>p:nth-child(even) {
				color: red;
			}

			.section2>p:nth-child(odd) {
				color: #00ff00;
			}

			/* 偶数：红色 */
			.section3>p:nth-child(2n) {
				color: red;
			}

			/* 奇数：绿色 */
			.section4>p:nth-child(2n - 1) {
				color: #0f0;
			}

			.section5>p:nth-child(3n) {
				color: #00f;
			}

			.section6>p:nth-child(n + 3) {
				color: #00f;
			}
			
		</style>
	</head>
	<body>
		<h1>:nth-child</h1>
		<ul>
			<li>nth-child表示第几个子元素</li>
			<li>用法：E:nth-child(n)</li>
			<li>选择偶数：E:nth-child(even)</li>
			<li>选择奇数：E:nth-child(odd)</li>
			<li>其中n从0开始</li>
		</ul>
		<h2>选择偶数 even</h2>
		<section class="section1">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</section>
		<h2>选择奇数 odd</h2>
		<section class="section2">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</section>
		<h2>选择偶数-做法2 2n</h2>
		<section class="section3">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</section>
		<h2>选择奇数-做法2 2n-1</h2>
		<section class="section4">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</section>
		<h2>选择第三的倍数个孩子：</h2>
		<section class="section5">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
			<p>7</p>
			<p>8</p>
			<p>9</p>
			<p>10</p>
		</section>
		<h2>选择从第三个孩子开始：n+3</h2>
		<section class="section6">
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
			<p>7</p>
			<p>8</p>
			<p>9</p>
			<p>10</p>
		</section>
	</body>
</html>
